<template>
    <div class="main">
        <div>
            <yd-flexbox direction="vertical">
                <yd-flexbox-item v-for="(item,index) in message" :key="index">
                    <div class="list_div" v-if="item.type == 'payment'" @click="toDetail('messagePayment',item)">
                        <div class="time_div">
                            <span class="time_font">上午</span>
                            <span class="time_font">{{item.time}}</span>
                        </div>
                        <div class="item">
                            <div class="title_div" >
                                <div class="title">
                                    <img src="../img/color_wallet.png" class="head_icon">
                                    <span>付款码支付</span>
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="middle_div">
                                <div class="middle">消费{{item.money}}元</div>
                            </div>
                            <div>
                                <div class="foot">查看详情</div>
                            </div>
                        </div>
                    </div>
                    <div class="list_div" v-else @click="toDetail('messageCoupon',item)">
                        <div class="time_div">
                            <span class="time_font">上午</span>
                            <span class="time_font">{{item.time}}</span>
                        </div>
                        <div class="item">
                            <div class="title_div">
                                <div class="title">
                                    <img src="../img/ticket.png" class="head_icon">
                                    <span>你有优惠领取</span>
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="middle_div">
                                <div class="middle">{{item.rule}}</div>
                            </div>
                            <div>
                                <div class="foot">查看详情</div>
                            </div>
                        </div>
                    </div>
                </yd-flexbox-item>
            </yd-flexbox>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Message',
    data () {
        return {
            message: [
                {
                    type: 'payment',
                    money: 10,
                    time: '11:10',
                    purpose: '购买饭票',
                    dateTime: '2018-11-1 12:10'
                },
                {
                    type: 'coupon',
                    rule: '充值100送10',
                    time: '09:52',
                    useTime: '2018-11-2至2018-11-30'
                },
                {
                    type: 'payment',
                    money: 30,
                    time: '08:32',
                    purpose: '奶茶店消费',
                    dateTime: '2018-10-12 12:10'
                }
            ],
            messageType: ''
        }
    },
    methods: {
        // 消息的路由跳转
        toDetail (routerName, message) {
            this.$router.push({name: routerName, params: {message}})
        }
    }
}
</script>
<style scoped>
.mian{width: 100%; height: 100%; overflow: auto;}
.list_div{width: 100%; text-align: center;}
.time_div{background-color: rgba(128, 128, 128, 0.548); width: 1.2rem; text-align: center; margin-left: auto; margin-right: auto; margin-top: .3rem;}
.time_font{color: aliceblue;}
.item{background-color: white; width: 90%; margin-left: auto; margin-right: auto; margin-top: .2rem; text-align: left;}
.title{font-size: 150%; font-weight: 200; padding: .2rem .3rem;}
.middle{padding: .2rem .3rem; color: gray;}
.foot{height: .6rem; padding: .1rem .3rem;}
.line {height: 1px; border-top: 1px solid rgb(235, 234, 234); text-align: center; width: 90%; margin-left: auto; margin-right: auto;}
.head_icon{width:.4rem; height: .4rem; position: relative; top: .06rem}
</style>
